<template>
    <div>
        <el-form label-width="180px">
            <el-form-item label="长度1：">
                <el-input-number v-model="pieces" :min="1" :step="10" @change="refresh1"></el-input-number>
            </el-form-item>

        </el-form>
        <v-stage :config="configKonva">
            <v-layer>
                <v-line :config="{
                    x: 20,
                    y: 20,
                    points: [0, 0, side1, 0],
                    stroke: 'black',
                  }"/>

                <template v-for="i in (pieces + 1)">
                    <v-line :key="i" :config="{
                        x: 20,
                        y: 20,
                        points: [(side1 / pieces) * (i - 1), -5, (side1 / pieces) * (i - 1), 5],
                        stroke: 'green',
                      }"/>
                </template>

            </v-layer>
        </v-stage>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                side1: 100,
                pieces: 10,
                multiple: 4,
                configKonva: {
                    width: 1000,
                    height: 200
                },
                configCircle: {
                    x: 100,
                    y: 100,
                    radius: 70,
                    fill: "red",
                    stroke: "black",
                    strokeWidth: 4
                }
            };
        },
        methods: {
            refresh1() {

            },

        },
        mounted() {
            this.side1 = Math.max(1000, window.innerWidth - 100)
            this.configKonva.width = this.side1 + 10
        }
    };

</script>
